<template>
  <div class="dialog-wrapper">
    <Modal
      :title="title"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <Form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="90"
        label-position="left">
        <FormItem label="产品名称" prop="name">
          <Input type="text" :disabled="isDisabled" placeholder="请输入产品名称（产品额度-砍头率-借款周期 例如：1000-20%-7）" v-model="form.name" />
        </FormItem>
        <FormItem label="产品编号" prop="productNo">
          <Input type="text" :disabled="isDisabled" placeholder="请输入产品编号（pn_产品额度_周期_砍头率 例如：pn_1000_7_20）" v-model="form.productNo" />
        </FormItem>
        <FormItem label="产品额度" prop="amount">
          <Input type="text" :disabled="isDisabled" placeholder="请输入产品额度" v-model="form.amount" number />
        </FormItem>
        <FormItem label="周期（天）" prop="loanCycle">
          <Input type="text" :disabled="isDisabled" placeholder="请输入周期（天）" v-model="form.loanCycle" number />
        </FormItem>
        <FormItem label="砍头率" prop="cutRatio">
          <Input type="text" :disabled="isDisabled" placeholder="请输入砍头率（例如：0.1）" v-model="form.cutRatio" number />
        </FormItem>
        <FormItem label="日利率" prop="interestRatio">
          <Input type="text" :disabled="isDisabled" placeholder="请输入日利率（例如：0.1）" v-model="form.interestRatio" number />
        </FormItem>
        <FormItem label="违约金费率" prop="penalRatio">
          <Input type="text" :disabled="isDisabled" placeholder="请输入违约金费率（例如：0.1）" v-model="form.penalRatio" number />
        </FormItem>
        <FormItem label="罚息费率" prop="penaltyInterestRatio">
          <Input type="text" :disabled="isDisabled" placeholder="请输入罚息费率（例如：0.1）" v-model="form.penaltyInterestRatio" number />
        </FormItem>
        <FormItem label="流量权重" prop="weight">
          <Input type="text" placeholder="请输入权重（例如：10）" v-model="form.weight" number />
          <p style="color:#333333;">权重为0即代表产品下架，不为0则代表上架，数字越大代表权重越大</p>
        </FormItem>
        <FormItem>
          <Button type="error"  @click="handleCancel" style="margin-right: 10px;">取消</Button>
          <Button type="primary"  @click="handleSubmit" :loading="btnLoading">确认提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'modalOperator',
    props: {
      title: String,
      type: String,
      value: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: {
          name: '',//产品名称
          productNo: '',//产品编号
          amount: '',//金额
          loanCycle: '',//周期
          interestRatio: '',//日利率
          penalRatio: '',//违约金费率
          penaltyInterestRatio: '',//罚息费率
          weight: '', //流量权重
          cutRatio: ''
        }
      }
    },
    data () {
      return {
        btnLoading: false,
        imgs: '',
        form: {},
        rules: {
          name: [
            { required: true, message: '请输入产品名称（产品额度-砍头率-借款周期）', trigger: 'blur' }
          ],
          productNo: [
            { required: true, message: '请输入产品编号（pn_借款金额_周期_砍头比例）', trigger: 'blur' }
          ],
          amount: [
            { type: 'number', required: true, message: '请输入产品额度', trigger: 'blur' }
          ],
          loanCycle: [
            { type: 'number', required: true, message: '请输入周期（天）', trigger: 'blur' }
          ],
          cutRatio: [
            { type: 'number', required: true, message: '请输入砍头率（例如：0.1）', trigger: 'blur' }
          ],
          interestRatio: [
            { type: 'number', required: true, message: '请输入日利率（例如：0.1）', trigger: 'blur' }
          ],
          penalRatio: [
            { type: 'number', required: true, message: '请输入违约金费率（例如：0.1）', trigger: 'blur' }
          ],
          penaltyInterestRatio: [
            { type: 'number', required: true, message: '请输入罚息费率（例如：0.1）', trigger: 'blur' }
          ],
          weight: [
            { type: 'number', required: true, message: '请输入流量权重（例如：10）', trigger: 'blur' }
          ]
        },
        loanProductNoList: []
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          this.form = this.formData;
        }
      }
    },
    computed: {
      isDisabled () {
        return this.type === 'update'
      }
    },
    methods: {
      // 表单提交
      handleSubmit () {
        const { form } = this.$refs;
        form.validate(valid => {
          if (valid) {
            this.btnLoading = true;
            this.form.operationType = this.type;
            this.$http.post('/helsinki/admin/loan-product-config', qs.stringify({
              ...this.form
            }))
            .then(({ data: { errcode, info, data } }) => {
              if (errcode == 0) {
                let message = this.type === 'save' ? '新增产品成功' : '编辑产品信息成功';
                this.$Message.success(message);
                this.$emit('ok');
              }
              this.btnLoading = false;
            }, error => {
              this.btnLoading = false;
              console.log(error);
            });
          }
        })
      },
      handleCancel () {
        this.$refs.form.resetFields();
        this.$emit('input', false);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ivu-form .ivu-form-item-label {
    margin-bottom: 0;
  }

  .ivu-radio-wrapper {
    margin-bottom: 0;
  }

  .ivu-divider-horizontal {
    margin: 0 auto 24px;
  }
</style>
